<template>
  <Layout>
    <div class="my">
      <div class="top">
        <div class="setting">

          <van-icon name="setting"
            size="20px"
            color="#fff" />
        </div>
        <!-- 个人信息 -->
        <div class="info">
          <div class="avatar">
            <img src="https://mina.52kfw.cn/uploads/attach/2021/09/20210923/6c560d5e896f2fa457ec50ff1dae77e3.png"
              alt="">
          </div>
          <div class="infoText">
            <div class="name">
              <span>曹阳</span>
            </div>
            <div class="introduce">
              用一句话介绍自己..
            </div>
          </div>
        </div>

        <!-- 选项卡 -->
        <div class="option">
          <div class="optionItem"
            @click="resumeCenterHandler">
            <img src="https://mina.52kfw.cn/uploads/attach/2022/06/20220622/6c4e97a40fdb95ea57ee156e071fd468.png">
            <span>附件简历</span>
          </div>
          <div class="optionItem"
            @click="resumeListHandler">
            <img src="https://mina.52kfw.cn/uploads/attach/2022/06/20220622/93d7b120928e3681059323ae1522ffe8.png">
            <span>已投简历</span>
          </div>
          <div class="optionItem"
            @click="collectHandler">

            <img src="https://mina.52kfw.cn/uploads/attach/2022/06/20220622/d7f80b639a9c863f0b203432533b707e.png">
            <span>我的收藏</span>
          </div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="list">
        <van-cell-group>
          <van-cell title="管理求职意向"
            icon="add-o"
            is-link />
          <van-cell title="个人主页"
            icon="shop-o"
            is-link />
          <van-cell title="关注公司"
            icon="like-o"
            is-link
            to="/message" />
          <van-cell title="常见回答"
            icon="other-pay"
            is-link
            to="/message" />
          <van-cell title="帮助与反馈"
            icon="info-o"
            is-link
            to="/message" />
        </van-cell-group>

        <!-- 退出登录 -->
        <div class="loginOut">
          <van-button round
            @click="login"
            size="large"
            type="danger"
            shape=' circle'>{{isLogin ? '退出登录':'登录'}}</van-button>
        </div>

      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
  import Layout from '../Layout/index.vue'
  import { reactive, onMounted, ref, Ref, toRaw, computed, getCurrentInstance } from 'vue'
  import { useRouter } from 'vue-router'
  const { proxy } = getCurrentInstance()
  const router = useRouter()
  import { Toast } from 'vant'
  let isLogin = ref(false)
  onMounted(() => {
    console.log(localStorage.getItem('token'))
    console.log(12412412)

    isLogin.value = localStorage.getItem('token') == null ? false : true
  })
  const login = () => {
    // 退出
    // alert('111')

    if (!isLogin.value) {
      router.push({ name: 'login' })
    } else {
      console.log(111123)
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      let promise = proxy.tim.logout()
      promise
        .then(function (imResponse) {
          console.log(imResponse.data) // 登出成功
        })
        .catch(function (imError) {
          console.warn('logout error:', imError)
        })
      isLogin.value = false
      Toast('退出成功')
    }
  }
</script>

<style lang="less" scoped>
.my {
  .top {
    height: 25vh;
    background: rgb(124, 182, 114);
    background: linear-gradient(114deg, rgba(124, 182, 114, 1) 0%, rgba(63, 167, 52, 1) 90%);
    padding-top: 40px;
    position: relative;
  }
  .setting {
    position: absolute;
    right: 13px;
    top: 13px;
  }
  .info {
    padding: 0 13px;
    display: flex;
    align-items: center;
    .avatar {
      width: 75px;
      height: 75px;
      img {
        width: 75px;
        height: 75px;
      }
    }
    .infoText {
      margin-left: 10px;
      .name {
        color: #fff;
        font-size: 25px;
      }
      .introduce {
        margin-top: 10px;
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
      }
    }
  }
  .option {
    // padding: 0 13px;
    position: absolute;
    z-index: 100;
    top: 140px;
    right: 13px;
    width: 345px;
    // margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0, 0, 18px, 0.2);
    padding: 16px 0;
    display: flex;
    .optionItem {
      text-align: center;
      width: 33%;
      img {
        margin: 0 auto;
        height: 25px;
        width: 25px;
      }
      span {
        display: inline-block;
        margin-top: 10px;
        font-size: 15px;
      }
    }
  }
  .list {
    margin-top: 30px;
    padding-top: 30px;
    background: #fff;
    height: (75vh - 40px);
    .loginOut {
      margin-top: 80px;
    }
  }
}
</style>